<template>
  <div class="setting-bg">
    <div class="setting-card" style="position:relative;">
      <div v-if="loading" class="setting-loading-float">
        <div class="spinner"></div>
        <div class="loading-text">{{ $t('common.loading') }}</div>
      </div>
      <div class="setting-row ">
        <div class="setting-label1">{{ $t('settings.startup') }}</div>
      </div>
      <div class="setting-row setting-underline">
        <!-- <div class="setting-label u-f-ac"
        style="margin-left: 10px;"
        @click="showFase"
        >{{ $t('settings.fastMode') }}<i class="iconfont icon-wenhao" style="margin-left: 10px;font-size: 22px;color: #999;"></i> </div>
        <label class="switch">
          <input type="checkbox" v-model="fastMode" />
          <span class="slider"></span>
        </label> -->
        <button class="setting-btn" style="margin-left: 100px;" @click="onMeterSetting">{{ $t('settings.scaleSettings') }}</button>
      </div>
      <div class="setting-row ">
        <div class="setting-label1">{{ $t('settings.systemInfo') }}</div>
      </div>
      <div class="setting-row setting-underline" >
        <div class="setting-label" >{{ $t('settings.unitName') }}</div>
        <input class="setting-input" v-model="unitName" :placeholder="$t('settings.unitName')" />
        <div class="setting-label">{{ $t('settings.showUnitNameInReport') }}</div>
        <label class="switch">
          <input type="checkbox" v-model="showUnitName" />
          <span class="slider"></span>
        </label>
      </div>
      <div class="setting-row setting-underline">
        <div class="setting-label">{{ $t('settings.deviceSN') }}</div>
        <div class="setting-sn-display">{{ deviceSN }}</div>
      </div>
      <div class="setting-row">
        <div class="setting-label1">{{ $t('settings.themeColor') }}</div>
      </div>
      <div class="setting-row setting-underline">
        <div class="setting-label">{{ $t('settings.selectTheme') }}</div>
        <div class="theme-selector">
          <div 
            v-for="theme in themeOptions" 
            :key="theme.value"
            class="theme-option"
            :class="{ active: currentTheme === theme.value }"
            @click="selectTheme(theme.value)"
          >
            <div class="theme-preview" :style="{ backgroundColor: theme.primary }">
              <div class="theme-dot" :style="{ backgroundColor: theme.secondary }"></div>
            </div>
            <span class="theme-name">{{ theme.name }}</span>
          </div>
        </div>
      </div>
      <div class="setting-row">
        <div class="setting-label1">{{ $t('settings.language') }}</div>
      </div>
    <div>
      <!-- <div class="setting-row ">
        <div class="setting-label">{{ $t('settings.voicePackage') }}</div>
        <div class="custom-select" @click.stop="toggleDropdown" :class="{ open: dropdownOpen }">
          <div class="custom-select__selected">{{ voiceTypeLabel }}</div>
          <div class="custom-select__arrow"></div>
          <ul v-if="dropdownOpen" class="custom-select__dropdown">
            <li
              v-for="item in voiceTypeOptions"
              :key="item.value"
              :class="{ active: voiceType === item.value }"
              @click.stop="selectVoiceType(item.value)"
            >
              {{ item.label }}
            </li>
          </ul>
        </div>
    </div> -->
      </div>
      <div class="setting-underline u-f-ac" style="text-align: left;padding-left: 28px;">
        <div class="setting-label">{{ $t('settings.chineseEnglishLanguage') }}</div>
        <el-radio-group v-model="lang" @change="changeLanguage" style="margin-left: 20px;">
    <el-radio value="zh-CN">{{ $t('settings.chinese') }}</el-radio>
    <el-radio value="en-US">{{ $t('settings.english') }}</el-radio>

  </el-radio-group>
      </div>
      <div class="setting-row setting-underline">
        <div class="setting-label1">{{ $t('settings.systemPassword') }}</div>
        <button class="setting-btn" @click="onResetPwd">{{ $t('settings.resetPassword') }}</button>
      </div>
      <div class="setting-row ">
        <div>
          <div class="setting-label1 " style="text-align: left;padding-left: 20px;" >{{ $t('settings.iotSettings') }}</div>
       <div class="u-f-ac" style="margin-top: 20px;margin-left: 20px;">
        <div class="setting-label">{{ $t('settings.enableIot') }}</div>
        <label class="switch" style="margin-left: 20px;">
          <input type="checkbox" v-model="iotEnable"  @change="onIotChange" />
          <span class="slider"></span>
        </label>
        </div>
       </div>
      </div>
      <!-- <div class="setting-row">
        <div class="setting-label1">{{ $t('settings.systemUpdate') }}</div>
      </div>
      <div class="setting-row">
        <div class="setting-label">{{ $t('settings.currentVersion') }}：</div>
        <span class="setting-version">{{  version}}</span>
        <button class="setting-btn" @click="onCheckUpdate" :disabled="updateLoading">
          {{ updateLoading ? $t('settings.checking') : $t('settings.checkUpdate') }}
        </button>
      </div> -->
    </div>
    <Dialog ref="dialogRef" > 
      <div style="font-weight: 500;color: #333;font-size:18px;">
        <p>{{ $t('settings.fastModeDesc.title') }}</p>
        <p>{{ $t('settings.fastModeDesc.line1') }}</p>
        <p>{{ $t('settings.fastModeDesc.line2') }}</p>
        <p style="margin-top: 20px !important;">{{ $t('settings.fastModeDesc.normalTitle') }}</p>
        <p>{{ $t('settings.fastModeDesc.line3') }}</p>
        <p>{{ $t('settings.fastModeDesc.line4') }}</p>

        <button class="dialog-confirm" @click="dialogRef.close()" style="margin-top: 30px;">{{ $t('common.confirm') }}</button>

      </div>
    </Dialog>
    <!-- 物联网的 -->
    <Dialog ref="dialogRefIot" >
      <div>
        <div style="color: #000;font-size: 22px;margin-top: 20px;">
        {{ $t('settings.iotConfirm') }}
      </div>
      <div class="dialog-btn" style="margin-top: 70px;">
        <button class="dialog-confirm" @click="doExit">{{ $t('common.confirm') }}</button>
        <button class="dialog-cancel" @click="cancelIot">{{ $t('common.cancel') }}</button>
      </div>
      </div>
    
    </Dialog>
    <Password :title="passTitle" ref="passwordRef" rest @reset="onReset" />
	<Message ref="msgRef" />

  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import Dialog from '../../components/Dialog.vue'
import Message from '../../components/Message.vue'
import Password from '../../components/Password.vue'

const fastMode = ref(false)
const unitName = ref('')
const showUnitName = ref(false)
const voiceType = ref('1')
const iotEnable = ref(false)
const deviceSN = ref('')
const dialogRef = ref(null)
const msgRef = ref(null)
const dialogRefIot = ref(null)
const passwordRef = ref(null)
const passTitle = ref('')
const router = useRouter()
const defaultPassword = '123456'
const version = ref('1.0')
const localPassword = ref(localStorage.getItem('systemPassword') || defaultPassword)
const loading = ref(false)
const updateLoading = ref(false)
const lang = ref('zh-CN')
const currentTheme = ref('blue')
const isInitialLoad = ref(true) // 添加首次加载标志
const isInitializing = ref(true) // 添加初始化标志

// 主题配置
const themeOptions = computed(() => [
  {
    value: 'blue',
    name: $t('settings.blueTheme'),
    primary: '#158ac0',
    secondary: '#5cc2e6'
  },
  {
    value: 'green', 
    name: $t('settings.greenTheme'),
    primary: '#10b981',
    secondary: '#34d399'
  },
  {
    value: 'purple',
    name: $t('settings.purpleTheme'), 
    primary: '#7c3aed',
    secondary: '#a78bfa'
  }
])

// 使用备用翻译系统
let t = (key) => key
let setLang = (newLang) => {}

// 创建响应式的翻译函数
const translationVersion = ref(0)
const $t = (key) => {
  // 依赖translationVersion来触发响应式更新
  translationVersion.value
  return t(key)
}

// 初始化翻译函数
const initTranslations = async () => {
  try {
    const fallback = await import('../../utils/i18n-fallback')
    t = fallback.t
    setLang = (newLang) => {
      fallback.setLang(newLang)
      translationVersion.value++
    }
    // 监听语言变化事件
    window.addEventListener('language-changed', () => {
      translationVersion.value++
    })
  } catch (error) {
    console.warn('Failed to load i18n fallback:', error)
  }
}

const voiceTypeOptions = computed(() => [
  { value: '1', label: $t('settings.mandarinFemale') },
  { value: '0', label: $t('settings.mandarinMale') }
])
const dropdownOpen = ref(false)
const voiceTypeLabel = computed(() => {
  const found = voiceTypeOptions.value.find(i => i.value === String(voiceType.value))
  return found ? found.label : ''
})
function toggleDropdown() {
  dropdownOpen.value = !dropdownOpen.value
}
function selectVoiceType(val) {
  voiceType.value = val
  dropdownOpen.value = false
}
function handleClickOutside(e) {
  dropdownOpen.value = false
}
onMounted(async () => {
  console.log('Setting页面开始初始化')
  await initTranslations()
  // 设置默认密码标题
  passTitle.value = $t('settings.setNewPassword')
  
  // 重置首次加载标志
  isInitialLoad.value = true
  isInitializing.value = true // 开始初始化
  console.log('初始化标志设置完成')
  
  // 从localStorage获取语言设置
  const savedLang = localStorage.getItem('language')
  if (savedLang) {
    lang.value = savedLang
    setLang(savedLang)
  }
  
  // 主题已在App.vue中全局初始化，这里不需要重复初始化
  
  // 最后调用getConfig获取后端配置
  console.log('开始调用getConfig')
  getConfig()
  
  window.addEventListener('click', handleClickOutside)
})
onUnmounted(() => {
  window.removeEventListener('click', handleClickOutside)
  window.electron?.ipcRenderer?.removeAllListeners('download-progress')
  window.electron?.ipcRenderer?.removeAllListeners('update-downloaded')
})

// 获取系统配置
const getConfig = () => {
  loading.value = true
  window.request?.('/system/config/getConfig', {
    method: 'GET',
  }).then(res => {
    if (res) {
      console.log('获取配置响应:', res)
      const oldIotEnable = iotEnable.value
      
      fastMode.value = res.fastMode
      
      // 只在首次加载时设置IoT状态，避免后续自动覆盖用户设置
      if (isInitialLoad.value) {
        iotEnable.value = res.iot
        console.log(`首次加载设置IoT状态: ${res.iot}`)
        isInitialLoad.value = false // 标记首次加载完成
      } else {
        // 非首次加载时，只在后端状态与当前状态不同时才更新
        if (oldIotEnable !== res.iot) {
          console.log(`IoT状态变化: ${oldIotEnable} -> ${res.iot} (来自后端)`)
          iotEnable.value = res.iot
        }
      }
      
      unitName.value = res.organizationName
      showUnitName.value = res.showOrganizationName
      voiceType.value = res.sex 
      version.value = res.version
      lang.value = res.lang
      deviceSN.value = res.sn || ''
      // 设置currentTheme.value但不重复应用主题（主题已在App.vue中全局初始化）
      const savedTheme = localStorage.getItem('theme')
      if (savedTheme) {
        currentTheme.value = savedTheme
      } else if (res.theme) {
        currentTheme.value = res.theme
        localStorage.setItem('theme', res.theme)
      }
      
      localStorage.setItem('showUnitName', res.showOrganizationName)
      localStorage.setItem('unitName', res.organizationName)
      localStorage.setItem('iotEnable', iotEnable.value.toString())
      
      // 通知其他组件 IoT 状态变化
      window.dispatchEvent(new CustomEvent('iot-status-changed', { 
        detail: { iotEnable: iotEnable.value } 
      }))
    }
  }).catch(error => {
    console.error('获取配置失败:', error)
  }).finally(() => {
    loading.value = false
    isInitializing.value = false // 结束初始化
    console.log('初始化完成，watch监听器已启用')
  })
}

// 强制刷新配置（用于需要同步后端状态的场景）
const forceRefreshConfig = () => {
  console.log('强制刷新配置')
  isInitialLoad.value = true // 临时设置为首次加载模式
  getConfig()
}

// 设置系统配置
const setConfig = () => {
  const config = {
    fastMode: fastMode.value,
    iot: iotEnable.value,
    organizationName: unitName.value,
    showOrganizationName: showUnitName.value,
    sex: voiceType.value === '普通话男' ? '0' : '1',
    lang: lang.value,
    theme: currentTheme.value
  }
  
  console.log('发送配置到后端:', config)
  
  window.request?.('/system/config/setConfig', {
    method: 'POST',
    body: config
  }).then((response) => {
    console.log('配置保存成功:', response)
    localStorage.setItem('showUnitName', showUnitName.value)
    localStorage.setItem('unitName', unitName.value)
    localStorage.setItem('iotEnable', iotEnable.value.toString())
    
    // 通知其他组件 IoT 状态变化
    window.dispatchEvent(new CustomEvent('iot-status-changed', { 
      detail: { iotEnable: iotEnable.value } 
    }))
  }).catch(error => {
    console.error('配置保存失败:', error)
  })
}

// 监听配置变化
const watchConfig = () => {
  // 在初始化期间不执行setConfig
  if (!isInitializing.value) {
    console.log('watchConfig触发，执行setConfig')
    setConfig()
  } else {
    console.log('watchConfig触发，但处于初始化阶段，跳过setConfig')
  }
}

// 切换语言
const changeLanguage = async (newLang) => {
  setLang(newLang)
  setConfig()
}

// 选择主题
const selectTheme = (theme) => {
  currentTheme.value = theme
  applyTheme(theme)
  localStorage.setItem('theme', theme)
  setConfig()
}

// 应用主题
const applyTheme = (theme) => {
  const selectedTheme = themeOptions.value.find(t => t.value === theme)
  if (selectedTheme) {
    // 设置CSS变量来应用主题色
    document.documentElement.style.setProperty('--theme-primary', selectedTheme.primary)
    document.documentElement.style.setProperty('--theme-secondary', selectedTheme.secondary)
    
    // 设置hover状态的颜色（稍微深一点的颜色）
    const primaryHover = adjustBrightness(selectedTheme.primary, -0.2)
    const secondaryHover = adjustBrightness(selectedTheme.secondary, -0.15)
    document.documentElement.style.setProperty('--theme-primary-hover', primaryHover)
    document.documentElement.style.setProperty('--theme-secondary-hover', secondaryHover)
    
    // 通知其他组件主题变化
    window.dispatchEvent(new CustomEvent('theme-changed', { 
      detail: { theme: theme, colors: selectedTheme } 
    }))
  }
}

// 调整颜色亮度的辅助函数
const adjustBrightness = (hexColor, factor) => {
  // 移除#号
  const hex = hexColor.replace('#', '')
  
  // 转换为RGB
  const r = parseInt(hex.substr(0, 2), 16)
  const g = parseInt(hex.substr(2, 2), 16)
  const b = parseInt(hex.substr(4, 2), 16)
  
  // 调整亮度
  const newR = Math.max(0, Math.min(255, Math.round(r * (1 + factor))))
  const newG = Math.max(0, Math.min(255, Math.round(g * (1 + factor))))
  const newB = Math.max(0, Math.min(255, Math.round(b * (1 + factor))))
  
  // 转换回十六进制
  return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`
}

// 监听各个配置项的变化
watch(fastMode, watchConfig)
// 移除对iotEnable的watch，避免自动触发setConfig
// watch(iotEnable, watchConfig)
watch(unitName, watchConfig)
watch(showUnitName, watchConfig)
watch(voiceType, watchConfig)
watch(currentTheme, watchConfig)

const showFase = () => {
  dialogRef.value.open()
}

const onIotChange = () => {
  if (!iotEnable.value) {
    // 用户要禁用IoT，显示确认对话框
    dialogRefIot.value.open()
  } else {
    // 用户要启用IoT，直接保存配置
    setConfig()
    msgRef.value?.show($t('settings.iotEnableSuccess'), 'success')
  }
}

const doExit = () => {
  // 用户确认禁用IoT
  dialogRefIot.value.close()
  setConfig()
  msgRef.value?.show($t('settings.iotDisabled'), 'success')
}

const cancelIot = () => {
  // 用户取消禁用IoT，恢复为true但不触发setConfig
  iotEnable.value = true
  dialogRefIot.value.close()
  // 不调用setConfig，避免不必要的请求
}

function onMeterSetting() { 
  router.push('/tableSetting')
}

function onReset() {
  const newPassword = passwordRef.value?.getPassword()
  console.log('onReset 被调用，获取到的密码:', newPassword, '当前标题:', passTitle.value)
  
  if (newPassword) {
          if (passTitle.value === $t('settings.setNewPassword')) {
        // 第一次输入新密码
        console.log('第一次输入新密码:', newPassword)
        localPassword.value = newPassword
        passTitle.value = $t('settings.repeatPassword')
        passwordRef.value?.clearPassword() // 清空密码输入
        passwordRef.value?.close()
        
        // 立即重新打开让用户再次输入
        setTimeout(() => {
          console.log('重新打开密码输入框，标题:', passTitle.value)
          passwordRef.value?.open()
        }, 100)
    } else {
      // 第二次确认密码
      console.log('第二次确认密码:', newPassword, '与第一次对比:', localPassword.value)
              if (newPassword === localPassword.value) {
          localStorage.setItem('systemPassword', newPassword)
          console.log('密码重置成功，已保存到localStorage')
          
          // 通知其他组件密码已更新
          window.dispatchEvent(new CustomEvent('password-updated'))
          
          msgRef.value?.show($t('settings.passwordResetSuccess'), 'success')
          passwordRef.value?.clearPassword() // 清空密码输入
          passwordRef.value?.close()
          // 重置状态
          passTitle.value = $t('settings.setNewPassword')
          localPassword.value = ''
        } else {
          console.log('两次密码输入不匹配')
          msgRef.value?.show($t('settings.passwordMismatch'), 'error')
          passwordRef.value?.clearPassword() // 清空密码输入
          passwordRef.value?.close()
          // 重置状态，让用户重新开始
          setTimeout(() => {
            passTitle.value = $t('settings.setNewPassword')
            localPassword.value = ''
          }, 1000)
        }
    }
  } else {
    console.log('未获取到密码')
  }
}

function onResetPwd() {
  passTitle.value = $t('settings.setNewPassword')
  passwordRef.value?.open()
}

// 检查更新
async function onCheckUpdate() {
  if (updateLoading.value) return
  updateLoading.value = true
  
  try {
    // 调用主进程检查更新
    const result = await window.electron?.ipcRenderer?.invoke('check-for-updates')
    
    if (result.hasUpdate) {
      // 有更新，显示更新对话框
      msgRef.value?.show($t('settings.newVersionFound'), 'success')
      
      // 监听下载进度
      window.electron?.ipcRenderer?.on('download-progress', (event, progress) => {
        msgRef.value?.show($t('settings.downloadProgress', { percent: Math.floor(progress.percent) }), 'success')
      })
      
      // 监听下载完成
      window.electron?.ipcRenderer?.on('update-downloaded', () => {
        msgRef.value?.show($t('settings.updateDownloaded'), 'success')
      })
    } else {
      msgRef.value?.show($t('settings.alreadyLatest'), 'success')
    }
  } catch (error) {
    console.error('检查更新失败:', error)
    msgRef.value?.show($t('settings.checkUpdateFailed'), 'error')
  } finally {
    updateLoading.value = false
  }
}
</script>

<style scoped>

p{
  margin-top: 0 !important;
  margin-bottom:5px !important;
}
.dialog-btn {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}
.dialog-cancel {
  min-width: 90px;
  background: #f3f3f3;
  color: #888;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  padding: 8px 0;
  cursor: pointer;
  transition: background 0.2s;
}
.dialog-cancel:hover {
  background: #e0e0e0;
}
.dialog-confirm {
  min-width: 90px;
  background: var(--theme-secondary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  padding: 8px 0;
  cursor: pointer;
  transition: background 0.2s;
}
.dialog-confirm:hover {
  background: var(--theme-secondary-hover);
}
.setting-bg {
  width: 100vw;
  height: 100vh;
  background: var(--theme-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.setting-card {
  width:90vw;
  min-height: 80vh;
  margin-top: -50px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(30,94,146,0.10), 0 2px 8px rgba(0,0,0,0.10);
  padding: 38px 48px 38px 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.setting-row {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  gap: 18px;
}
.setting-label1 {
  min-width: 110px;
  color: #999;
  font-size: 18px;
  font-weight: 500;
}
.setting-label {
  min-width: 110px;
  color: #333;
  font-size: 18px;
  font-weight: 500;
}
.setting-input {
  width: 260px;
  height: 36px;
  border: 1px solid #d0d0d0;
  background-color: #f5f5f5;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 16px;
  margin-right: 18px;
}
.setting-sn-display {
  width: 260px;
  height: 36px;
  border: 1px solid #d0d0d0;
  background-color: #f8f8f8;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 16px;
  margin-right: 18px;
  display: flex;
  align-items: center;
  color: #666;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}
.setting-select {
  width: 160px;
  height: 36px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 16px;
  padding: 0 10px;
  background-color: #f5f5f5;
  color: #333;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cc2e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  transition: all 0.2s ease;
}

.setting-select:hover {
  border-color: #5cc2e6;
  background-color: #fff;
}

.setting-select:focus {
  outline: none;
  border-color: #158ac0;
  box-shadow: 0 0 0 2px rgba(21, 138, 192, 0.1);
}
.setting-btn {
  min-width: 90px;
  background: var(--theme-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  padding: 8px 9px;
  cursor: pointer;
  transition: background 0.2s;
}
.setting-btn:hover {
  background: var(--theme-primary-hover);
}
.setting-version {
  color: #1e5e92;
  font-size: 16px;
  margin-right: 18px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #e0e0e0;
  border-radius: 28px;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: .4s;
  box-shadow: 0 2px 8px rgba(30,94,146,0.10);
}
.switch input:checked + .slider {
  background-color: var(--theme-primary);
}
.switch input:checked + .slider:before {
  transform: translateX(20px);
}
.setting-underline {
  border-bottom: 1.5px solid #e0e6ed;
  margin-bottom: 30px;
  padding-bottom: 12px;
  margin-top: 15px;
}
.custom-select {
  position: relative;
  height: 44px;
  background: var(--theme-primary);
  border-radius: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin-left: 0;
  margin-right: 0;
  transition: box-shadow 0.2s;
}
.custom-select.open {
  box-shadow: 0 4px 16px rgba(21,138,192,0.15);
}
.custom-select__selected {
  flex: 1;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding-left: 24px;
}
.custom-select__arrow {
  width: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-select__arrow::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}
.custom-select__dropdown {
  position: absolute;
  top: 48px;
  left: 0;
  width: 100%;
  background: #eaf4fb;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(21,138,192,0.15);
  z-index: 10;
  padding: 8px 0;
}
.custom-select__dropdown li {
  padding: 10px 24px;
  color: #158ac0;
  font-size: 18px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.custom-select__dropdown li.active,
.custom-select__dropdown li:hover {
  background: #d0eafd;
  color: #158ac0;
}
.setting-loading-float {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #e0e6ed;
  border-top: 5px solid #158ac0;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 18px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-text {
  color: #158ac0;
  font-size: 18px;
  font-weight: 500;
}

/* 主题选择器样式 */
.theme-selector {
  display: flex;
  gap: 20px;
  align-items: center;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 8px;
  border-radius: 8px;
}

.theme-option:hover {
  background-color: #f5f5f5;
}

.theme-option.active {
  background-color: #e3f2fd;
}

.theme-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

.theme-option:hover .theme-preview {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.theme-option.active .theme-preview {
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transform: scale(1.1);
}

.theme-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.8);
}

.theme-name {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  text-align: center;
}

.theme-option.active .theme-name {
  color: #333;
  font-weight: 600;
}
</style>
